<template>
  <div class="login flex w-screen h-screen overflow-hidden">
    <div class="login-lt flex items-center justify-center flex-1">
      <transition enter-active-class="animate__bounceIn">
        <img src="@/assets/svg/team-work.svg" alt="" class="w-[75%]" v-show="isShow"/>
      </transition>
    </div>
    <div class="login-rt flex-1 flex items-center justify-center">
      <div>
        <div class="text-center text-[24px] mb-8">系统登录</div>
        <a-form
          :model="form"
          :style="{ width: '360px' }"
          @submit="handleSubmit"
          size="large"
        >
          <a-form-item
            field="mobile"
            hide-label
            label="账号"
            :rules="[
              { required: true, message: '请输入账号' },
            ]"
            :validate-trigger="['change', 'input']"
          >
            <a-input v-model="form.mobile" placeholder="请输入账号" allow-clear>
              <template #prefix>
                <User theme="outline" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            field="password"
            hide-label
            label="密码"
            :rules="[{ required: true, message: '请输入密码' }]"
            :validate-trigger="['change', 'input']"
          >
            <a-input-password v-model="form.password" placeholder="请输入密码" allow-clear autocomplete>
              <template #prefix>
                <Lock theme="outline" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item hide-label>
            <a-button html-type="submit" long type="primary" :loading="loading">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { login } from '@/api/graph'
import { Message } from '@arco-design/web-vue'
import { reactive, ref } from 'vue'
import { User, Lock } from '@icon-park/vue-next'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const isShow = ref(false)
setTimeout(() => {
  isShow.value = true
}, 100)
const form = reactive({
  appId: 'FZS58GM4',
  companyId: 'f2e379df-4f3a-2378-ccac-b1408b4bf4e3',
  mobile: '',
  password: ''
})
const handleSubmit = async (data) => {
  try {
    const { errors, values } = data
    if (errors) {
      return false
    }
    loading.value = true
    const res = await login(values)
    if (res.data) {
      sessionStorage.setItem('token', res.data)
    }
    Message.success('登录成功')
    loading.value = false
    await router.push('/')
  } catch (e) {
    loading.value = false
    Message.error(e.message)
  }
}
</script>

<style lang="less" scoped>
.login {
  .login-lt {
    background: url('../../assets/svg/login-bg.svg') no-repeat 100%;
  }
}
</style>
